<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script lang=javascript src=js/ajax_getContent.js></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.1/jquery.mobile-1.4.1.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.1/jquery.mobile-1.4.1.min.js"></script>
<script type="text/javascript" src="flot/jquery.flot.min.js"></script>
<script type="text/javascript" src="flot/jquery.flot.crosshair.js"></script>
</head> 
<html>
<body>


<?php
			session_start();
			if(isset($_GET['p']) && ($_GET['p'] == "tw")) {
				$_SESSION["login"] = true;
			}
			if(!isset($_SESSION["login"]) || ($_SESSION["login"] != true))
				die("Not Authenticated, please enter password");
?>
<?php
	require("config_readonly.php");
	require("db_api.php");
	date_default_timezone_set('Asia/Taipei') ;
	if(isset($_GET['scene']))
		$tbl = $_GET['scene'];
	else
		$tbl = "sun_moon_lake";
	$sceneInfo = getScene($tbl);
	if(!isset($sceneInfo))
		die("Get scene info $tbl failed\n");	

	$scene_name = $sceneInfo['cname'];
	$allScene = getAllScene();
	$output="";
	foreach($allScene as $key => $val) {
		$name = $val['cname'];
		if(!isset($_GET['_spp_day'])) {
			$output .= "<li><a data-ajax='false' data-rel='popup' href='?scene=".$val['tbl']."'> $name </a></li>";
		}
		else {
			$sday = $_GET['_spp_day'];
			$output .="<li><a data-ajax='false' data-rel='popup' href='?_spp_day=$sday&scene=".$val['tbl']."'> $name </a></li>";
		}
	}
	
?>
<div id='page' data-role="page">
	<div id="header" data-role="header">
<?php
	echo "<H1> $scene_name 遊客指標 </H1>";
?>
		<a href="#popupMenu" data-rel="popup" data-role="button" data-inline="true" data-transition="fade">景點</a>

		<div data-role="popup" id="popupMenu" >
		<ul data-role="listview" data-inset="true" style="min-width:210px;" >
			<?php echo $output; ?>
		</ul>
		</div>
	</div>
	<div id='content' data-role="content">
		<div id="placeholder"></div>
		<p><center>時間</center></p>
	</div>
	<div id='footer' data-role="footer">
		<p align=right style="font-size:10px;"> wealthSharing.TW@gmail.com</p>
	</div>
</div>




<script>
var plot;
var data = [];

w = $('#page').width()-30;
h = $('#page').height() / 2;
$('#placeholder').css({width: w, height: h});
 
var dataset = [
    {
<?php
        echo "label: \"".date('j, M', time())."\","; 
?>
        data: data
    }
];
var options = {
    series: { 
        lines: { show: true },     
        points: {
            radius: 3,
            show: true
        }
    },
	grid: {
		hoverable: true,
		clickable: true,
		autoHighlight: false
	},
	xaxis: {
		mode: "categories",
		ticks: [
			[0, '00'],[1,''],[2,'02'],[3,''],[4,'04'],[5,''],[6,'06'],
			[7, ''],[8,'08'],[9,''],[10,'10'],[11,''],[12,'12'],[13,''],[14,'14'],
			[15, ''],[16,'16'],[17,''],[18,'18'],[19,''],[20,'20'],[21,''],
			[22, '22'],[23,'']
		]
	},
	yaxis: {
		tickFormatter: function(val, axis) { return val < axis.max ? val.toFixed(2) : "指標";}
	},
}


	$(function() {
    $("#placeholder").bind("plothover", function (event, pos, item) {
        $("#tooltip").remove();
        if (item) {
            var tooltip = item.series.data[item.dataIndex][2];
            
            $('<div id="tooltip">' + tooltip + '</div>')
                .css({
                    position: 'absolute',
                    display: 'none',
                    top: item.pageY - 10,
                    left: item.pageX + 10,
                    border: '1px solid #fdd',
                    padding: '2px',
                    'background-color': '#fee',
                    opacity: 0.80 })
                .appendTo("body").fadeIn(200);

            
            showTooltip(item.pageX, item.pageY, tooltip);
        }
    });
	});
function queryResult() {
<?php 
	if(isset($_GET['_spp_day']))
		$tp = $_GET['_spp_day'];
	else
		$tp= date('Ymd',time());	
	$retval = "";
	$dataRecord = query_tbl_record($tbl, 10000*$tp, 10000*($tp+1)-1, $retval); // today
	if($retval != "OK_OK")
		$content = "{}";
	else
		$content = json_encode($dataRecord);
	echo "var json_text = '$content';\n";
?>
	obj = JSON.parse(json_text);

	current = 0;
	idx = -1;
	var condense = [];
	for(var i in obj) {
		tp = Math.floor(obj[i]['tp'] / 100);
		if(tp != current) {
			current = tp;
			idx++;
		}
		//else //enable this to use first data, or use the last. because, we have to have multiple records to fix wrong data. we use last.
		//	continue;
		t0 = obj[i]['weather'];
		t1 = obj[i]['temperature'];
		t2 = obj[i]['checkins'];
		condense[idx] = [tp,t0,t1,t2];

		
	}
	for(i=0;i<24;i++)
		data[i] = [i,0,"尚無資料"];
	for(var i in condense) {
		if(obj[i] == undefined) {
			data[i] = [i,0, "尚無資料"];
		}
		else  {
			tp = condense[i][0];
			hour = tp % 100;
			if(i == 0) {
				msg = hour + " 尚無資料";
				data[hour] = [hour,0, msg];
			}
			else {
				checkins = condense[i][3] - condense[i-1][3];
				temperature = condense[i][2];
				weather = condense[i][1];
				if(checkins > 10000) {
					checkins = 0;
					msg = "新資料起點";
				}
				else {
					if (checkins < 0 ) checkins = 0;
					msg = hour  + "點, 指數 " + 
						checkins +", 溫度 " + 
						Math.floor(temperature) + ", 天氣 " + 
						weather ;
				}
				data[hour] = [hour,checkins, msg];
			}
		}
	}
	plot = $.plot($("#placeholder"), dataset, options);
}
queryResult();
</script>
</body>
</html>
